<template>
	<view class="u-flex-col">
			<view class="u-flex user-box u-row-left u-m-t-20">
				<view class="u-m-t-20  ">
					<view class="u-font-xl">12年考研政治时政选择合集</view>
					<view class="u-flex u-row-between u-m-r-10">
						<view class="" v-for="item in text" :key='index'>
							<u-tag  :text="item"  :type="type" :shape="shape"  :mode="mode" @close="close" @click="click" :show="show" :size="size" />			
						</view>
						
					</view>
					<view class="u-demo-area">
						<u-rate v-model="value" :count="count" @change="change"
						:active-color="activeColor" :inaction-color="inactiveColor"
						:active-icon="activeIcon" :inactive-icon="inactiveIcon"
						:disabled="disabled" :colors="colors" :icons="icons"></u-rate>
					</view>
					<view class="u-flex">
							<view class="u-m-r-20">32568人下载</view>
							<view class="">12543人好评</view>
					</view>
				
				</view>
			</view>
			<view class="u-flex u-row-center u-m-t-20 ">
			
			<u-button class="content " size="default" type="warning">开始启用</u-button>
			</view>
			
			<view class="">介绍</view>
			<view class="u-flex user-box detail">
				这个挺好用的，前端运行日志，请另行在小程序中控制台查看！
			</view>
			</view>
	</view>

	
</template>

<script>
	export default{
		data(){
			return{
				activeColor: '#FA3534',
				inactiveColor: '#b2b2b2',
				disabled: false,
				count: 5,
				customIcon: false,
				plain: false,
				value: 0,
				colors: [],
				icons: [],
				text:  { text1: '学习' ,
						 text2: '政治' ,
						 text3: '考研' ,
						 text4: '公务员',
						 
						}
					  ,
				mode: 'light',
				type: 'error',
				size: 'default',
				shape: 'square',
				closeable: false,
				show: true
			}
		},
		computed: {
			activeIcon() {
				let icon = this.customIcon ? 'heart' : 'star';
				return this.plain ? icon : icon + '-fill'
			},
			inactiveIcon() {
				let icon = this.customIcon ? 'heart' : 'star';
				return this.plain ? icon : icon + '-fill'
			}
		},
		
	}
</script>

<style>
	page{
		background-color: #ededed;
	}
	.user-box{
		background-color: #fff;
	}
	.content{width: 98%;}
	.detail{
		height: 300rpx;
	}
</style>
